<template>
	<page-wraper>
		<view>
			<wd-img width="100%" :height="280" src="https://www.ytad-pep.com/bg.jpg" />

			<view class="custom-card" style="padding-top: 10px; margin-top: 10px;">
				<view style="margin-bottom: 10px;">{{ !model.code ? '注册账号' : `邀请您注册易行邮` }}</view>
				<wd-form ref="form" :model="model" errorType="toast">
					<wd-cell-group border>
						<wd-input label="姓名" label-width="90px" prop="userName" v-model="model.userName"
							:rules="[{ required: true, message: '请填写您的名字' }]" />
						<wd-input label="手机号码" label-width="90px" prop="phoneNumber" v-model="model.phoneNumber"
							:rules="[{ required: true, message: '请填写手机号码' }]" />
						<input type="password" class="nonPwd" />
						<wd-input label="登录密码" label-width="90px" prop="password" show-password
							v-model="model.password" :rules="[{ required: true, message: '请填写登录密码' }]" autocomplete="off" />
						<wd-input label="电子邮箱" label-width="90px" prop="email" v-model="model.email"
							:rules="[{ required: true, message: '请输入电子邮箱' }]" />
						<wd-input label="邮箱验证码" label-width="90px" prop="verifycode" v-model="model.verifycode"
							:rules="[{ required: true, message: '请填写邮箱验证码' }]">
							<template #suffix>
								<wd-button size="small" custom-class="button" @click="getCode"
									:disabled="!model.email || sendCodeTimeout > 0">
									{{ sendCodeTimeout > 0 ? `获取验证码(${sendCodeTimeout}S)` : '获取验证码' }}
								</wd-button>
							</template>
						</wd-input>
					</wd-cell-group>
				</wd-form>
			</view>

			<view style="padding: 10px 15px;">
				/*#ifdef MP-WEIXIN*/
				<view style="margin-bottom: 10px;">
					<wd-checkbox v-model="user_service_proto" shape="square">
						<view style="display: inline; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0)); font-size: 12px;" @click="() => openProtocol(0)">用户服务协议</view>
					</wd-checkbox>
				
					<wd-checkbox v-model="privacy_policy" shape="square">
						<view style="display: inline; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0)); font-size: 12px;" @click="() => openProtocol(1)">隐私政策</view>
					</wd-checkbox>
				</view>
				/*#endif*/
				<wd-button type="primary" size="large" @click="handleSubmit" block>注册</wd-button>
				<wd-button type="default" size="small" @click="login" block custom-style="margin-top: 10px; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));">返回登录</wd-button>
			</view>
		</view>
	</page-wraper>
</template>
<script lang="ts" setup>
	import { useToast } from '@/uni_modules/wot-design-uni'
	import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';

	const user_service_proto = ref(false);
	const privacy_policy = ref(false);

	const { success: showSuccess, error: showError, loading: showLoading, close: closeToast } = useToast()
	const model = reactive<{
		code: string,
		userName : string,
		phoneNumber : string,
		email : string
		password : string,
		verifycode : string,
		sessionid: string
	}>({
		code: '',
		userName: '',
		phoneNumber: '',
		email: '',
		password: '',
		verifycode: '',
		sessionid: ''
	})

	const form = ref<FormInstance>()
	const sendCodeTimeout = ref(0);
	const protocols = [
		['用户服务协议', 'user_service_proto'],
		['隐私政策', 'privacy_policy']
	];
	const username = ref('');
	
	onLoad((query: any) => {
		if (query.code) {
			uni.setStorageSync("code", query.code);
		} else if (query.scene) {
			uni.setStorageSync("code", query.scene);
		}
		
		const code = uni.getStorageSync("code");
		
		if (code) {
			model.code = code;
			
			console.log(code);
			console.log(`public/username/${code}`);
			
			// uni.$http.get(`../../public/username/${code}`).then(res => {
			// 	if (res.data.code == 0) {
			// 		username.value = res.data.data;
			// 	}
			// });
		}
	})
	
	function openProtocol(index : number) {
		uni.navigateTo({ url: `/pages/protocol/Index?type=${protocols[index][1]}&title=${protocols[index][0]}` });
	}

	function login() {
		uni.redirectTo({
			url: '/pages/login/Index'
		});
	}

	function getCode() {
		if (!model.email) {
			showError('请先填写电子邮箱');
			return;
		}

		showLoading('正在发送验证码...');

		uni.$http.post('passport/send_verify_code-x', { email: model.email, flags: 0, verifycode: '1234' }).then(res => {
			closeToast();

			if (res.data.code == 0) {
				sendCodeTimeout.value = 60;
				model.sessionid = res.data.data;

				var timer = setInterval(() => {
					sendCodeTimeout.value--;

					if (sendCodeTimeout.value == 0) {
						clearInterval(timer);
					}
				}, 1000);

				showSuccess('验证码已发送');
			} else {
				showError(res.data.msg);
			}
		});
	}

	function handleSubmit() {
		form
			.value!.validate()
			.then(async ({ valid, errors }) => {
				if (valid) {
					showLoading('正在提交注册...');
					
					const res = await uni.$http.post('passport/register-x', model);

					closeToast()
					
					model.sessionid = '';

					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							complete() {
								uni.navigateTo({
									url: '/pages/login/Index'
								})
							}
						});
					} else {
						showError(res.data.msg);
					}
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>
<style lang="scss" scoped>
	.nonPwd {
		height: 1px;
		width: 1px;
		display: none;
	}
	
	.custom-card {
		padding: var(--wot-card-padding, 0 var(--wot-size-side-padding, 15px));
		background-color: var(--wot-card-bg, var(--wot-color-white, rgb(255, 255, 255)));
		line-height: var(--wot-card-line-height, 1.1);
		margin: var(--wot-card-margin, 0 var(--wot-size-side-padding, 15px));
		border-radius: var(--wot-card-radius, 8px);
		box-shadow: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02));
		font-size: var(--wot-card-fs, var(--wot-fs-content, 14px));
		padding-top: 5px;
		padding-bottom: 5px;
	}
</style>